<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<title>掌上小鑫鑫-五金查询平台</title>
	<meta name="description" content="掌上小鑫鑫(鑫鑫(www.xiaoxx.net)是专门)是专门为五金行业打造的信息化平台，操作简洁，一键式搜索。给客户提供五金类产品信息服务，在小鑫鑫平台上搜索五金产品，查看商家主营信息，一键拨打商家电话订货。为五金采购者提供商家信息对接。包括五金产品供应,五金产品采购,五金企业招商,五金配件等信息,是中国五金采购的必备掌上平台">
	<meta name="keywords" content="五金,小鑫鑫,五金建材,五金批发,五金查询,五金工具,机械设备,日用五金,五金耗材,劳保用品,五金企业,五金采购">
	<link rel="shortcut icon" sizes="16x16" href="./images/weixin/icon.jpg">
	<script src="js/weixin/vue.js"></script>
	<script src="js/weixin/mui.min.js"></script>
	<script src="js/weixin/axios.min.js"></script>
	<link rel="stylesheet" href="css/weixin/mui.min.css">
	<link rel="stylesheet" type="text/css" href="css/weixin/style.css">
	<style type="text/css">
		#zhao {
			min-height: 100%;
			padding-bottom: 20px;
			height: auto;
		}

		.pos {
			position: initial;
			width: 60%;
			margin: 0 auto;
		}

		#tell_box {
			display: none;
			position: absolute;
			bottom: 0px;
			z-index: 99999999;
			width: 100%;
			background: #d8d8d8;
		}

		#tell_box h4 {
			margin-bottom: 10px;
			background: white;
			text-align: center;
			line-height: 40px;
			margin-top: 0px;
		}

		.page_view {
			z-index: 45;
		}

		#slider img {
			height: 180px;
		}
	</style>
	<script>
		function imgError(image) {
				app.sellerPicpath = null;
				// 隐藏图片
				// image.style.display = 'none';
				// 替换为默认图片
				// image.setAttribute("src","http://www.xiaoxx.net//gypupload/advertimage/20181114/77065b1d-cd40-46a1-b3c3-eaae9d3903d8.png");
			}
		</script>
</head>

<body bgcolor="#f4f4f4">
	<div id="app" v-cloak>
		<header class="mui-bar mui-bar-nav putong">
			<h1 class="mui-title">"{{scopeName}}"的查询结果</h1>
			<a class="mui-action-back mui-icon mui-icon-arrowleft" style="color:#fff;"></a>
		</header>
		<!-- <div class="mui-content"> -->
		<!-- <div class="serch_list"> -->
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper serch_list" style="margin-bottom: 60px;">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron" style="background: none;">
					<li v-for="value in arr">
						<button class="li" @click="open(value.id)"></button>
						<div class="gsxx">
							<div v-if="value.sellerPhone.length===11 || value.sellerTel.length > 11">
								<button class="tel" @click="tel(value.sellerPhone,value.sellerTel)"></button>
							</div>
							<div v-else>
								<a class="null">此商户未留联系方式</a>
							</div>
							<h1 class="sj dian">
								<img v-show="value.sellerType===1" src="images/weixin/vip.png" width="25" />
								<span v-if="value.sellerType===1" class="vip">{{value.sellerName}}</span><span v-else>{{value.sellerName}}</span>

							</h1>
							<p class="dizhi dian">{{value.sellerAddr}}</p>
						</div>
						<div class="zhuying">
							<button type="button" class="mui-btn">详情</button>
							<span class="zy dian">主营：{{value.sellerScope}}</span>
						</div>
					</li>
					<li style="padding: 20px;text-align: center;margin-top: 20px;" v-show="arr1=== 0">当前查询的"{{scopeName}}"没有找到对应的商户，请更换或减少关键字再试一下，商户信息持续更新中</li>
				</ul>
			</div>

		</div>
		<!---->
		<!-- </div> -->
		<!--结果列表end-->
		<!-- </div> -->

		<footer>
			<ul>
				<li>
					<a href="index.html" class="hover"><img src="images/weixin/icon001.png" />查询首页</a>
				</li>
				<li>
					<a href="contact.html"><img src="images/weixin/icon002.png" />联系我们</a>
				</li>
			</ul>
		</footer>

		<!--底部菜单end-->

		<div id="tell_box">
			<h4>请选择要拨打的号码</h4>
			<ul class="mui-table-view">

				<li v-if="num.length === 11" class="mui-table-view-cell" @click="call(num)">
					<a class="mui-navigate-right">
						手机：{{num}}
					</a>
				</li>

				<li v-else class="mui-table-view-cell">
					<a class="mui-navigate-right">
						手机：空
					</a>
				</li>

				<li v-if="num2 === null || num2.length < 11" class="mui-table-view-cell">
					<a class="mui-navigate-right">
						电话：空
					</a>
				</li>

				<li v-else class="mui-table-view-cell" @click="call(num2)">
					<a class="mui-navigate-right">
						电话： {{num2}}
					</a>
				</li>

			</ul>
		</div>

		<div id="zhao">
			<header class="mui-bar mui-bar-nav putong" v-show="sellerType===0">
				<h1 class="mui-title">商家详情</h1>
				<a v-if="shouye === 0" @click="none" class="mui-icon mui-icon-arrowleft" style="color:#fff;"></a>
				<a v-else onclick="history.go(-1);" class="mui-icon mui-icon-arrowleft" style="color:#fff;"></a>
			</header>

			<header class="mui-bar mui-bar-nav vipyonghu" v-show="sellerType===1">
				<h1 class="mui-title">商家详情</h1>
				<a v-if="shouye === 0" @click="none" class=" mui-icon mui-icon-arrowleft" style="color:#fff;"></a>
				<a v-else onclick="history.go(-1);" class="mui-icon mui-icon-arrowleft" style="color:#fff;"></a>
			</header>
			<!--头部end-->
			<div style="margin-top:50px;">
				<span class="page_view">访问量({{sellerClick}})</span>

				<div id="slider" class="mui-slider" v-if="srcArr.length > 0">
					<div class="mui-slider-group mui-slider-loop">
						<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img :src="PICURL+firstImg">
							</a>
						</div>
						<!-- 第一张 -->
						<div class="mui-slider-item" v-for="val in srcArr" :key="val.id">
							<a href="#">
								<img :src="PICURL+val.picPath">
							</a>
						</div>

						<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img :src="PICURL+lastImg">
							</a>
						</div>
					</div>
					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator" v-for="val of srcArr" :key="val.id"></div>
					</div>
				</div>

				<!--<img v-if="sellerPicpath" :src="sellerPicpath" onerror="imgError(this);" height="180" width="100%">-->
				<div class="" v-else style="widows: 100%;height: 180px;text-align: center;font-size: 10px;line-height: 180px;">
					该商家暂无图片
				</div>
			</div>
			<!--轮播图end-->
			<div class="fudong">
				<div class="xiangqing">
					<div class="gsxx">
						<div v-if="num2 !== null||num !== null">
							<a href="javascript:;" @click="tel(num,num2)"><img src="images/weixin/tel.png" width="60" height="60"></a>
						</div>
						<div v-else>
							<a class="null">此商户未留电话</a>
						</div>

						<h1 class="w70 dian h1" v-show="sellerType===0">{{sellerName}}</h1>
						<h1 class="w70 dian h1 " v-show="sellerType===1"><img src="images/weixin/vip.png" alt="" width="25" /><span class="vip">{{sellerName}}</span></h1>
						<!-- <p class="w70 dian">{{sellerAddr}}</p> -->
					</div>
				</div>
				<div class="nav">
					<ul class="">
						<li class="active02">商家详情</li>
						<!-- <li class="">产品展示</li>-->
					</ul>
				</div>
			</div>
			<!--基本资料end-->
			<div class="xxzl">
				<h2>商家地址</h2>
				<!--<p>{{marketAddr}}&nbsp;&nbsp;&nbsp;{{marketName}}</p>-->
				<p>{{sellerAddr}}</p>
				<hr style="border:none; border-top:1px solid #dbdbdb; " />
				<h2>主营</h2>
				<p>{{sellerScope}}</p>
				<hr style="border:none; border-top:1px solid #dbdbdb; " />
				<h2>企业简介</h2>
				<p>{{sellerProfile}}</p>
			</div>
			<button v-if="shouye === 0" type="button" class="mui-btn mui-btn-blue mui-btn-block pos" @click="none()">返回查询列表</button>
			<button v-else type="button" class="mui-btn mui-btn-blue mui-btn-block pos" onclick="history.go(-1)">返回</button>
		</div>
	</div>
</body>
<script type="text/javascript">
	let id = localStorage.getItem('ID');
	mui.init({
		pullRefresh: {
			container: '#pullrefresh',
			up: {
				contentrefresh: '正在加载...',
				contentnomore: "---我是有底线的---",
				callback: pullupRefresh
			}
		}
	});
	var count = 2;
	var key;
	var app = new Vue({
		el: '#app',
		data: {
			scopeName: '焊丝',
			arr: [],
			he: [],
			arr1: 1,

			shouye: 0,
			sellerClick: 12,
			sellerName: "商家名称",
			sellerAddr: "商家地址",
			sellerScope: "商家主营产品/商家主营产品/商家主营产品",
			sellerProfile: "商家简介商家简介商家简介商家简介商家简介商家简介商家简介商家简介商家简介商家简介商家简介",
			sellerType: Number,
			sellerPhone: "",
			sellerTel: '',
			marketAddr: '',
			marketName: '',
			num: '',
			num2: '',
			srcArr: [],
			firstImg: '',
			lastImg: ''
		},
		mounted() {
			if (id !== null) {
				console.log(id)
				this.shouye = 1;
				this.open(id);
				localStorage.removeItem('ID');
			}

			if (localStorage.getItem("KEY")) {
				key = localStorage.getItem("KEY");
				this.scopeName = key;
				localStorage.removeItem("KEY");

				axios.get(URL + 'searchAction!searchSeller', {
						params: {
							scopeName: this.scopeName,
							ye: 1
						}
					})
					.then(function (response) {
						app.arr = response.data.data;
						setTimeout(function () {
							// gaoliang()
						}, 50)

						if (app.arr.length === 0) {
							app.arr1 = 0;
						}

					})
					.catch(function (error) {
						console.log(error);
					});
			}

		},
		methods: {
			tel(num, num2) {
				mask.show(); //显示遮罩
				mui("#tell_box")[0].style.display = 'block';
				mui(".mui-backdrop")[0].style.zIndex = '99999998';
				app.num = num;
				app.num2 = num2;
			},
			call(num) {
				location.href = "tel:" + num;
				mui("#tell_box")[0].style.display = 'none';
				mask.close(); //关闭遮罩
			},
			none() {
				document.querySelector("#zhao").style.display = 'none';
				document.querySelector("footer").style.display = 'block';
			},
			open(id) {
				this.xiangxi(id);
				document.querySelector("#zhao").style.display = 'block';
				document.querySelector("footer").style.display = 'none';

			},
			xiangxi(id) {

				mui.ajax(URL + 'searchAction!findSellerById', {
					data: {
						id: id
					},
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function (data) {
						var getData = data.data[0].seller[0];

						app.sellerClick = getData.sellerClick;
						app.sellerAddr = getData.sellerAddr;
						app.sellerName = getData.sellerName;
						app.sellerScope = getData.sellerScope;
						app.sellerProfile = getData.sellerProfile;
						app.num = getData.sellerPhone;
						app.num2 = getData.sellerTel;
						app.sellerPicpath = getData.sellerPicpath1;
						app.sellerType = getData.sellerType;
						app.marketName = getData.marketName;
						app.marketAddr = getData.marketAddr;
						console.log(app.num.length, app.num2.length);
						app.srcArr = data.data[0].sellerPic;
						if (app.srcArr.length > 0) {
							app.firstImg = app.srcArr[app.srcArr.length - 1].picPath;
							app.lastImg = app.srcArr[0].picPath;
						}
						if (app.srcArr.length > 1) {
							setTimeout(function () {
								var gallery = mui('.mui-slider');
								gallery.slider({
									interval: 3000 //自动轮播周期，若为0则不自动播放，默认为0；
								});
							}, 200)
						}
					},
					error: function (xhr, type, errorThrown) {
						console.log(xhr)
					}
				});

			}
		}

	})

	function disnone() {
		mui("#tell_box")[0].style.display = 'none';
	}

	var mask = mui.createMask(disnone); //callback为用户点击蒙版时自动执行的回调；
	function pullupRefresh() {
		console.log(key);
		axios.get(URL + 'searchAction!searchSeller', {
				params: {
					scopeName: key,
					ye: count
				}
			})
			.then(function (response) {
				// console.log(response.data.data);
				mui('#pullrefresh').pullRefresh().endPullupToRefresh(response.data.data.length === 0) //参数为true代表没有更多数据了。
				var data1 = app.arr
				var data2 = response.data.data
				var data3 = data1.concat(data2);
				app.arr = data3;
				count++;
				// gaoliang();
			})
			.catch(function (error) {
				console.log(error);
			});
	}



	// function gaoliang() {
	// 	var oContent = document.querySelectorAll('.sj>span');
	// 	var oCon = document.querySelectorAll('.zy');

	// 	var val = app.scopeName;

	// 	for (var i = 0; i < oContent.length; i++) {
	// 		var findText = oContent[i].innerText.split(val);
	// 		var find = oCon[i].innerText.split(val);
	// 		// 标题高亮
	// 		oContent[i].innerHTML = findText.join('<span style="color:#ff8d24;">' + val + '</span>')
	// 		// 主营高亮
	// 		oCon[i].innerHTML = find.join('<span style="color:#ff8d24;">' + val + '</span>')

	// 	}
	// }
	console.log(app.shouye)
</script>

</body>

</html>